<html>
<head>
<!--
Implementing a dropbox service with the Blobstore API (part 2): 
http://blog.notdot.net/2010/04/Implementing-a-dropbox-service-with-the-Blobstore-API-part-2
upload2.html
-->
    <title>File Hangar: Upload file</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript" src="/static/plupload/gears_init.js"></script>
  <script type="text/javascript" src="/static/plupload/js/plupload.full.js"></script>
  <script type="text/javascript">
    $(function() {
      var uploader = new plupload.Uploader({
        runtimes: 'gears,html5,flash,html4',
        browse_button: 'pickfiles',
        container: 'container',
        url: '{{form_url}}',
                                use_query_string: false,
                                multipart: true,
                                flash_swf_url: '/static/plupload/plupload.flash.swf',
      });
      uploader.bind('FilesAdded', function(up, files) {
        $.each(files, function(i, file) {
          $('#filelist').append(
            '<div id="' + file.id + '">' +
            'File: ' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
            '</div>'
          );
        });
      });
      uploader.bind('UploadProgress', function(up, file) {
        $('#' + file.id + ' b').html(file.percent + '%');
      });
      uploader.bind('FileUploaded', function(up, file, response) {
                                window.location = response.response;
      });
      uploader.bind('Error', function(up, err) {
                          alert("Upload error: " + err.message);
      });
      uploader.bind('QueueChanged', function(up) {
        uploader.start();
      });
      
      uploader.init();
    });
  </script>

</head>
<body>
  <p style="float: right"><a href="{{logout_url}}">Log Out</a></p>
  <h1>Upload a file to App Engine File Hangar</h1>
    <form>
        <div id="container">
            <div id="filelist"></div>
                 <a id="pickfiles" href="#">[Upload files]</a>
        </div>
    </form>

</body>
</html>